<template>
  <div>
    <!--面包屑-->
    <breadcrumb></breadcrumb>
    <!-- 卡片-->
    <el-card class="box-card">
      <el-row :gutter="20">
        <search :list="userList" @clearSearch="clearSearch" @searchData="searchData"></search>
        <add></add>
      </el-row>
      <!-- 用户列表-->
      <el-table :data="dataList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="userName" label="昵称"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="integ" label="积分"></el-table-column>
        <el-table-column prop="followLength" label="关注数/人"></el-table-column>
        <el-table-column prop="fansLength" label="粉丝数/人"></el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <!--修改按钮-->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)"></el-button>
            <!--删除按钮-->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deletes(scope.row.userName)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 修改信息-->
    <el-dialog
      title="修改信息"
      :visible.sync="editDialogVisiable"
      width="50%"
      @open="openEdit"
      @close="closeEdit"
    >
      <!--内容主体-->
      <showEdit :scope="scope" v-if="isShowEdit" ref="showEditRef"></showEdit>
      <!--按钮-->
    </el-dialog>
  </div>
</template>
<script>
import breadcrumb from '../breadcrumb.vue'
import search from '../search.vue'
import add from './add.vue'
import showEdit from './showEdit.vue'
export default {
  data() {
    return {
      userList: [],
      dataList: [],
      editDialogVisiable: false,
      scope: '',
      isShowEdit: true
    }
  },
  created() {
    this.comm.getUserList(0).then(async data => {
      await data.forEach(item => {
        item.integ = this.comm.integSum(item.integ)
      })
      this.userList = await this.comm.userListFormat(data)
      this.dataList = await this.userList
    })
  },
  methods: {
    searchData(data) {
      this.dataList = data
    },
    clearSearch() {
      this.dataList = this.userList
    },
    // 编辑信息
    edit(scope) {
      this.scope = scope
      this.editDialogVisiable = true
    },
    openEdit() {
      this.isShowEdit = true
    },
    closeEdit() {
      this.isShowEdit = false
    },
    // 删除
    async deletes(scope) {
      this.comm.deletes(scope, '/deleteuser/', this).then(res => {
        if (!res) {
          return
        }
        this.comm.ArrSplice(this.dataList, 'userName', scope)
      })
    }
  },
  components: {
    breadcrumb,
    search,
    add,
    showEdit
  }
}
</script>
<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 10px;
}
.el-table {
  margin-top: 15px;
}
</style>
